<html  xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8" />
    <script src="js/jquery-2.2.3.min.js" type="text/javascript" th:src="@{/js/jquery-2.2.3.min.js}" ></script>
    <script src="lib/layer/2.4/layer.js" type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}" ></script>
    <script src="backStageJs/productDesc.js" type="text/javascript" th:src="@{/backStageJs/productDetail.js}" ></script>
    <link href="css/common.css" type="text/css" rel="stylesheet" th:href="@{/css/common.css}"/>
    <link href="css/product.css" type="text/css" rel="stylesheet" th:href="@{/css/product.css}"/>
    <title>商品详情</title>
</head>

<body>
    <div class="container header">
        <div class="span5">
            <div class="logo">
                <a>
                    <img th:src="@{/image/yijiarenlog.jpg}"/>
                </a>
            </div>
        </div>
        <div class="span9">
            <div class="headerAd">
                <img th:src="@{/image/header.jpg}" alt="正品保障" title="正品保障" height="50" width="320"/>
            </div>
        </div>
        <div th:replace="header :: header"></div>
        <div th:replace="menu :: menu"></div>
    </div>
    <form  method="post">
        <input type="hidden" id = "productId" name="productId" th:value="${product.productId }"/>
    <div class="container productContent">
        <div class="span6">
            <div class="hotProductCategory">
                <!-- 一级分类显示 -->
                    <dl th:each="category:${categoryList}">
                        <dt>
                            <a th:href="@{'/product/findProductByCid?page=1&amp;row=4&amp;cid='+${category.categoryType}}" th:text="${category.categoryName}"></a>
                        </dt>
                        <!-- 显示二级分类 -->
                             <!--<c:forEach items="${c.categorySeconds}" var="cs">
                                 <dd>
                                     <a href="${path}/product/findProductByCsid?csid=${cs.csid}&pageNow=1">${cs.csname}</a>
                                 </dd>
                             </c:forEach>-->
                    </dl>

            </div>
        </div>
        <div class="span18 last">
            <div class="productImage">
                <a title="" style="outline-style: none; text-decoration: none;" id="zoom" th:href="@{${product.productIcon}}" rel="gallery">
                    <div class="cloud-zoom">
                        <img style="opacity: 1;" title="" class="medium" th:src="@{${product.productIcon}}"/>
                        <div style="display: block; top: 0px; left: 162px; width: 0px; height: 0px; position: absolute; border-width: 1px;" class="zoomPup"></div>
                        <div style="position: absolute; z-index: 5001; left: 312px; top: 0px; display: block;" class="zoomWindow">
                            <div style="width: 368px;" class="zoomWrapper">
                                <div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div>
                                <div style="width: 0%; height: 0px;" class="zoomWrapperImage">
                                    <img th:src="@{${product.productIcon}}" style="position: absolute; border: 0px none; display: block; left: -432px; top: 0px;"/>
                                </div>
                            </div>
                        </div>
                        <div style="visibility: hidden; top: 129.5px; left: 106px; position: absolute;" class="zoomPreload">Loading zoom</div>
                    </div>
                </a>
            </div>
            <div class="name" th:text="${product.productName}"></div>
            <div class="sn">
                <div th:text="'编号：'+${product.productId}"></div>
            </div>
            <div class="info">
                <dl>
                    <dt>商城价:</dt>
                    <dd>
                        <strong th:text="'￥'+${product.productPrice}"></strong>
                        参 考 价：
                        <del th:text="'￥'+${product.productPrice}"></del>
                    </dd>
                </dl>
                <dl>
                    <dt>促销:</dt>
                    <dd>
                        <a target="_blank" title="限时抢购 (2018-08-01 ~ 2018-08-31)">限时抢购</a>
                    </dd>
                </dl>
                <dl>
                    <dt>    </dt>
                    <dd>
                        <span>    </span>
                    </dd>
                </dl>
            </div>
            <div class="action">
                <dl class="quantity">
                    <dt>购买数量:</dt>
                    <dd>
                        <input id="count" name="count" value="1" maxlength="4" onpaste="return false;" type="text" onblur="checkCount()"/>
                    </dd>
                    <dd>
                        件<span style="color: #d80000"></span>
                    </dd>
                    <dd>
                        <span id="span1"></span>
                    </dd>
                </dl>
                <div class="buy">
                    <input type="button" th:onclick="'addCart()'" value="加入购物车" style=""/>
                    <!--<button id="addCartItem" class="addCartItem">加入购物车</button>-->
                </div>
            </div>
            <div id="bar" class="bar">
                <ul>
                    <li id="introductionTab">
                        <a href="#introduction">商品介绍</a>
                    </li>
                </ul>
            </div>
            <div id="introduction" name="introduction" class="introduction">
                <div class="title">
                    <strong>商品介绍</strong>
                </div>
                <div th:text="${product.productDescription}">

                </div>
            </div>
        </div>
    </div>
</form>
    <div class="container footer">
        <div class="span24">
            <div class="footerAd">
                <img src="/image/footer.jpg" alt="我们的优势" title="我们的优势" height="52" width="950"/>
            </div>
        </div>
        <div class="span24">
            <ul class="bottomNav">
                <li>
                    <a href="#">关于我们</a>
                    |
                </li>
                <li>
                    <a href="#">联系我们</a>
                    |
                </li>
                <li>
                    <a href="#">诚聘英才</a>
                    |
                </li>
                <li>
                    <a href="#">法律声明</a>
                    |
                </li>
                <li>
                    <a>友情链接</a>
                    |
                </li>
                <li>
                    <a target="_blank">支付方式</a>
                    |
                </li>
                <li>
                    <a target="_blank">配送方式</a>
                    |
                </li>
                <li>
                    <a >SHOP++官网</a>
                    |
                </li>
                <li>
                    <a>SHOP++论坛</a>
                </li>
            </ul>
        </div>
        <div class="span24">
            <div class="copyright">Copyright © 2018-2099 Amazon 版权所有</div>
        </div>
    </div>

</body>
</html>
